<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElNotification } from 'element-plus'

// 定义props
const props = defineProps({
    user: {
        type: Object,
        default: () => ({ name: '张文聪' })
    }
})

const headerName = "LinkHome"

const router = useRouter()
const searchQuery = ref('')
const currentRoute = ref('/')

// 导航菜单项
const navItems = ref([
    { title: '首页', path: '/' },
    { title: '所有工具', path: '/tools' },
    { title: '文档', path: '/docs' },
    { title: '帮助中心', path: '/help' }
])

// 计算用户名称的首字母
const userInitials = computed(() => {
    return props.user.name
        .split(' ')
        .map(word => word.charAt(0))
        .join('')
        .toUpperCase()
        .substring(0, 2)
})

// 计算用户名（简写版）
const userName = computed(() => {
    const names = props.user.name.split(' ')
    if (names.length > 1) {
        return `${names[0]} ${names[1].charAt(0)}.`
    }
    return props.user.name
})

// 处理搜索
const handleSearch = () => {
    if (searchQuery.value) {
        ElMessage.success(`搜索: ${searchQuery.value}`)
        // 在实际应用中，这里可以触发搜索功能或跳转到搜索结果页
        searchQuery.value = ''
    }
}

// 处理用户命令
const handleUserCommand = (command) => {
    switch (command) {
        case 'profile':
            ElNotification.info('打开个人资料')
            break
        case 'settings':
            ElNotification.info('打开设置')
            break
        case 'logout':
            ElNotification.info('退出登录')
            break
    }
}

// 导航到指定路径
const navigateTo = (path) => {
    currentRoute.value = path
    // 在实际应用中，这里应该使用路由跳转
    ElNotification.info(`导航到: ${path}`)
}

// 返回首页
const goHome = () => {
    currentRoute.value = '/'
    ElNotification.info('返回首页')
}
</script>

<template>
    <header class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500 text-white sticky top-0 z-50 shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2 cursor-pointer" @click="goHome">
                    <i class="fas fa-toolbox text-2xl"></i>
                    <span class="text-xl font-bold">{{ headerName }}</span>
                </div>

                <!-- 导航菜单 -->
                <nav class="hidden md:flex space-x-6">
                    <a v-for="(item, index) in navItems" :key="index" :href="item.path"
                        :class="['py-2 px-1 border-b-2 transition-all',
                            currentRoute === item.path ? 'border-white font-medium' : 'border-transparent hover:border-white']" @click.prevent="navigateTo(item.path)">
                        {{ item.title }}
                    </a>
                </nav>

                <!-- 用户操作区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div
                        class="hidden md:flex items-center bg-white/15 rounded-full px-3 py-1.5 transition-all hover:bg-white/25">
                        <i class="fas fa-search text-white/80"></i>
                        <el-input v-model="searchQuery" placeholder="搜索工具..." class="search-input"
                            @keyup.enter="handleSearch" />
                    </div>

                    <!-- 用户头像和下拉菜单 -->
                    <el-dropdown @command="handleUserCommand" trigger="click">
                        <div class="flex items-center space-x-2 cursor-pointer">
                            <div
                                class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-light to-success flex items-center justify-center text-white font-semibold">
                                {{ userInitials }}
                            </div>
                            <span class="hidden md:inline">{{ userName }}</span>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="profile">
                                    <i class="fas fa-user mr-2"></i>个人资料
                                </el-dropdown-item>
                                <el-dropdown-item command="settings">
                                    <i class="fas fa-cog mr-2"></i>设置
                                </el-dropdown-item>
                                <el-dropdown-item divided command="logout">
                                    <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </header>
</template>

<style scoped>
/* 修复搜索输入框样式 */
.search-input :deep(.el-input__wrapper) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.search-input :deep(.el-input__inner) {
    background: transparent !important;
    color: white !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 5px;
    width: 160px;
}

.search-input :deep(.el-input__inner::placeholder) {
    color: rgba(255, 255, 255, 0.7) !important;
}
</style>